<template>
  <section class="banner">
    <div class="banner-content">
      <h1 class="banner-title">软件开发 SaaS商城</h1>
      <h2 class="banner-subtitle">SOFTWARE DEVELOPMENT SAAS (SOFTWARE AS A SERVICE) ONLINE MALL</h2>
      <p class="banner-desc">手机小程序、一站式服务，省心建站</p>
    </div>
    <div class="banner-image"></div>
  </section>
</template>

<script>
export default {
  name: 'Banner'
}
</script>

<style scoped>
.banner {
  height: 500px;
  background: linear-gradient(135deg, #053a70, #1a73e8);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 5%;
}

.banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><line x1="0" y1="0" x2="100" y2="100" stroke="rgba(255,255,255,0.1)" stroke-width="1"/><line x1="100" y1="0" x2="0" y2="100" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
}

.banner-content {
  position: relative;
  z-index: 2;
  color: white;
  width: 60%;
}

.banner-title {
  font-size: 48px;
  margin-bottom: 10px;
  font-weight: bold;
}

.banner-subtitle {
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: 300;
  letter-spacing: 1px;
}

.banner-desc {
  font-size: 20px;
  margin-bottom: 30px;
}

.banner-image {
  position: absolute;
  right: 5%;
  bottom: 10%;
  width: 350px;
  height: 350px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><text x="10" y="120" font-family="Arial" font-size="80" font-weight="bold" fill="rgba(255,255,255,0.7)">SaaS</text></svg>') no-repeat;
  transform: perspective(500px) rotateY(-15deg);
  z-index: 1;
}
</style>